<script setup lang="ts">
import { getEnvironmentList } from '@/api/code/environment';
import type { Environment } from '@/api/code/environment/type';
import { onMounted, ref } from 'vue';
import Create from './components/Create.vue';

const showCreate = ref(false);
const environmentList = ref([] as Environment[]);

onMounted(() => {
    getEnvironmentList().then((res) => {
        environmentList.value = res.data as Environment[];
    })
})
</script>

<template>
    <div class="container">
        <div class="header">
            <el-button @click="showCreate = true" type="primary">创建环境</el-button>
        </div>
        <el-table :data="environmentList" style="width: 100%" stripe border>
            <el-table-column prop="name" label="环境名" />
            <el-table-column prop="imageName" label="镜像名" />
            <el-table-column prop="type" label="类型" />
            <el-table-column prop="prefixCommand" label="前置命令" />
            <el-table-column prop="suffixCommand" label="后置命令" />
        </el-table>
        <Create v-model:show="showCreate"></Create>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
}
.header {
    margin-bottom: 1%;
}
</style>